<template>
  <view class="red-pkg">
    <view :class="[!chatItem.isRedRead ? 'is-read-pkg':'is-not-read-pkg']" @click="showPkg">
      <view class="red-con" :class="[userId == chatItem.sendId ? 'right-pkg':'left-pkg']">
        <view class="con-top">
          <view class="con-top-img">
            <image v-if="!chatItem.isRedRead" :src="require('../static/img/redpkg/01.svg')"></image>
            <image v-else :src="require('../static/img/redpkg/02.svg')"></image>
          </view>
          <view class="con-top-title">
            <view class="title-detail">
              <text v-if="getFormatNews.hbType == '3'">给{{getFormatNews.appointUserName}}的红包</text>
              <text v-else>{{getFormatNews.title == '' ? '恭喜发财，大吉大利':getFormatNews.title}}</text>
            </view>
          </view>

        </view>
        <view class="con-bottom-title">
          <view class="bottom-title">
            <text v-if="getFormatNews.hbType == '2'">手气红包</text>
            <text v-else-if="getFormatNews.hbType == '3'">专属红包</text>
            <text v-else>普通红包</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: ['chatItem'],
    data() {
      return {
        userId: uni.getStorageSync('userId')
      }
    },
    computed: {
      getFormatNews() {
        return JSON.parse(this.chatItem.news)
      }
    },
    methods: {
      showPkg() {
        this.$emit('showRedPkg', this.chatItem)
      }
    }
  }
</script>

<style scoped lang="scss">
  .left-pkg {

    margin-left: 28rpx;
    position: relative;
    word-break: break-all;

    &::after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-top: 10rpx solid transparent;
      border-bottom: 10rpx solid transparent;
      position: absolute;
      left: -16rpx;
      top: 30rpx;
    }

    .con-top-img {
      image {
        margin: 0 20rpx 0 0;
      }
    }

    .bottom-title {
      text-align: right;
    }
  }

  .right-pkg {
    // background-color: #FCE1C3;
    background-color: #F89F3B;
    margin-right: 28rpx;
    position: relative;
    // word-break: break-all;

    .con-top {
      //flex-direction: row-reverse;
    }

    &::after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-top: 10rpx solid transparent;
      border-bottom: 10rpx solid transparent;
      border-left: 16rpx solid #F89F3B;
      position: absolute;
      right: -16rpx;
      top: 30rpx;
    }

    .con-top-img {
      image {
        margin: 0 20rpx 0 0;
      }
    }

    .title-name,
    .title-detail {
      text-align: left;
    }

  }

  .is-read-pkg {
    .left-pkg {
      background-color: #F89F3B;

      &::after {
        border-right: 16rpx solid #F89F3B;
      }
    }

    .right-pkg {
      background-color: #F89F3B;

      &::after {
        border-left: 16rpx solid #F89F3B;
      }
    }

  }

  .is-not-read-pkg {
    .left-pkg {
      background-color: #FCE1C3;

      &::after {
        border-right: 16rpx solid #FCE1C3;
      }
    }

    .right-pkg {
      background-color: #FCE1C3;

      &::after {
        border-left: 16rpx solid #FCE1C3;
      }
    }
  }

  .red-con {
    // width: 360rpx;
    // height: 130rpx;
    // padding: 15rpx 15rpx;
    padding: 25rpx;
    border-radius: 10rpx;

    .con-top {
      height: 70rpx;
      display: flex;
      padding-bottom: 10rpx;
      border-bottom: 1rpx solid #fff;

      .con-top-img {
        image {
          width: 60rpx;
          height: 60rpx;
        }
      }

      .con-top-title {
        //width: 230rpx;
        width: 360rpx;

        text {
          // margin-left: 1rpx;
          font-size: 32rpx;
          color: #fff;

          word-break: break-all;
          /*属性规定自动换行的处理方法。normal(使用浏览器默认的换行规则。),break-all(允许在单词内换行。),keep-all(只能在半角空格或连字符处换行。)*/
          text-overflow: ellipsis;
          display: -webkit-box;
          /** 对象作为伸缩盒子模型显示 **/
          -webkit-box-orient: vertical;
          /** 设置或检索伸缩盒对象的子元素的排列方式 **/
          -webkit-line-clamp: 1;
          /** 显示的行数 **/
          overflow: hidden;
          /** 隐藏超出的内容 **/
        }

        .title-detail {
          height: 60rpx;
          line-height: 60rpx;
        }

        // .title-name {
        // 	height: 40rpx;
        // 	line-height: 40rpx;
        // }
      }
    }
  }

  .con-bottom-title {
    .bottom-title {
      text {
        font-size: 22rpx;
        color: #fff;
      }
    }

  }
</style>